<template>
  <div class="left-nav">
   <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="中超" name="first">
    </el-tab-pane>
    <el-tab-pane label="西甲" name="second">西甲</el-tab-pane>
    <el-tab-pane label="德甲" name="third">德甲</el-tab-pane>
    <el-tab-pane label="英超" name="fourth">英超</el-tab-pane>
  </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'LeftNav',
  data () {
    return {
      msg: 'Welcome to team',
      activeName: 'first'
    }
  },
  methods: {
    handleClick (tab, event) {
      // console.log(tab, event)

      let league = tab.$el.innerText

      let URLPara = encodeURI(league)

      // const apiURL = 'http://op.juhe.cn/onebox/football/league'
      // const apiURLPara = encodeURI('?dtype=&league=中超&key=42f228ce6f78c1bdcac4eb3e7574336c')
      // const apiFB = apiURL + apiURLPara

      window.location.href = '/#/league/' + URLPara
      // this.$route.push({path: '/league', query: {'league': '西甲'}})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .left-nav{
        color: #fff;
        font-size: 10px;
        height: 100%;
        width: 100%;
    }
    .iconfont{
        font-size: 24px;
    }
    .left-nav ul{
        padding: 0px;
        margin: 0px;
    }
    .left-nav li{
        list-style: none;
        text-align: center;
        border-bottom: 1px solid #20a0ff;
        padding: 10px;
    }

</style>
